<template>
  <div id="Product">
    <!-- 面包导航 -->
    <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>物资管理</el-breadcrumb-item>
      <el-breadcrumb-item>物资资料</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片区域 -->
    <el-card class="box-card">
      <!--友情提示-->
      <el-container style="margin-bottom:20px;">
        <el-alert
          show-icon
          title="友情提示:  商品的分类只支持三级分类"
          type="warning">
        </el-alert>
      </el-container>

      <!--查询条件区域-->
      <el-row :gutter="6">
        <!--级联查询-->
        <el-col :span="5">
          <el-cascader
            size="mini"
            placeholder="请选择分类查询"
            :change-on-select="true"
            @change="selectChange"
            v-model="categorykeys"
            :props="searchSelectProps"
            :options="catetorys"
            clearable
          ></el-cascader>
        </el-col>

        <el-col :span="6">
          <el-input
            clearable
            size="mini"
            v-model="queryMap.name"
            placeholder="请输入物资名称查询"
            @clear="search"
            class="input-with-select"
          ></el-input>
        </el-col>

        <el-col :span="5">
          <template>
            <el-select size="mini" v-model="queryMap.status" @click="search" placeholder="请选择状态">
              <el-option label="正常" :value="0"></el-option>
              <el-option label="回收站" :value="1"></el-option>
              <el-option label="待审核" :value="2"></el-option>
            </el-select>
          </template>
        </el-col>

        <el-col :span="8">
          <el-button size="mini" type="primary" icon="el-icon-search" @click="search">查找</el-button>
          <el-button size="mini" icon="el-icon-refresh-right" type="warning" @click="resetForm">重置</el-button>
          <el-button size="mini" type="success" icon="el-icon-circle-plus-outline" @click="openAdd"
                     v-hasPermission="'product:add'">添加
          </el-button>
          <el-button size="mini" icon="el-icon-refresh" @click="getproductList">刷新</el-button>
        </el-col>
      </el-row>

      <!--表格区域-->
      <template>
        <el-table
          size="mini"
          v-loading="loading"
          border
          stripe
          :data="productData"
          style="width: 100%;margin-top:20px;"
          height="490"
        >
          <el-table-column prop="id" type="index" label="ID"></el-table-column>
          <el-table-column prop="imageUrl" label="图片" align="center" width="150px" padding="0px">
            <template slot-scope="scope">
              <el-popover placement="right" trigger="hover">
                <!--:src="'https://www.zykhome.club/'+scope.row.imageUrl"-->
                <img :src="'https://www.zykhome.club/'+scope.row.imageUrl"
                     style="height: 200px;width: 200px"/>
                <img slot="reference" :src="'https://www.zykhome.club/'+scope.row.imageUrl"
                     :alt="scope.row.imgUrl" style="height: 38px;width: 38px;cursor: pointer">
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="物资名称"></el-table-column>
          <el-table-column prop="pnum" :show-overflow-tooltip='true' label="物资编号"></el-table-column>
          <el-table-column label="物资规格" width="100">
            <template slot-scope="scope">
              <el-tag type="success" size="mini" closable v-text="scope.row.model"></el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="unit" label="单位" width="80"></el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template slot-scope="scope">
              <el-tag size="mini" type="danger" effect="plain" v-if="scope.row.status==1">回收</el-tag>
              <el-tag size="mini" effect="plain" v-if="scope.row.status==0">正常</el-tag>
              <el-tag size="mini" effect="plain" type="warning" v-if="scope.row.status==2">审核中</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!--回收站：恢复,删除-->
              <span v-if="scope.row.status==1">
                 <el-popconfirm
                   @onConfirm="back(scope.row.id)"
                   style="margin-left:10px;"
                   confirmButtonText='好的'
                   cancelButtonText='不用了'
                   icon="el-icon-info"
                   iconColor="green"
                   title="这是一段内容确定恢复吗？"
                 >
                   <el-button type="text" size="mini" slot="reference" icon="el-icon-back">恢复</el-button>
                 </el-popconfirm>
                <el-button style="margin-left:10px;" type="text" size="mini" icon="el-icon-delete"
                           @click="del(scope.row.id)">删除</el-button>
              </span>

              <!--正常：编辑,回收站-->
              <span v-if="scope.row.status==0">
                 <el-button type="text" size="mini" icon="el-icon-edit" @click="edit(scope.row.id)">编辑</el-button>
                <el-popconfirm
                  @onConfirm="remove(scope.row.id)"
                  style="margin-left:10px;"
                  confirmButtonText='好的'
                  cancelButtonText='不用了'
                  icon="el-icon-info"
                  iconColor="red"
                  title="这是一段内容确定移入回收站吗？"
                >
                <el-button type="text" slot="reference" size="mini" icon="el-icon-s-operation">回收站</el-button>
                </el-popconfirm>
              </span>

              <!--待审核：通过，删除-->
              <span v-if="scope.row.status==2">
                <el-popconfirm
                  @onConfirm="publish(scope.row.id)"
                  style="margin-left:10px;"
                  confirmButtonText='是的'
                  cancelButtonText='不用了'
                  icon="el-icon-info"
                  iconColor="blue"
                  title="确定审核通过吗？"
                >
                <el-button type="text" slot="reference" size="mini" icon="el-icon-s-operation">通过</el-button>
              </el-popconfirm>
                <el-button style="margin-left:10px;" type="text" size="mini" icon="el-icon-delete"
                           @click="del(scope.row.id)">删除</el-button>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!--分页-->
      <el-pagination
        style="padding-top: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[8, 10, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

      <!-- 物资添加弹出框 -->
      <el-dialog title="添加物资" :visible.sync="addDialogVisible" width="50%" @close="closeAddDialog">
        <span>
          <el-form
            size="mini"
            :model="addRuleForm"
            :rules="addRules"
            ref="addRuleFormRef"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="物资名称" prop="name">
              <el-input v-model="addRuleForm.name"></el-input>
            </el-form-item>

            <el-form-item label="物资图片" prop="name">
              <!-- 图片上传部分 -->
              <el-upload
                :action="uploadApi"
                :class="{ disabled: uploadDisabled }"
                list-type="picture-card"
                :limit="limitcount"
                :on-change="handleChange"
                :on-remove="handleRemove"
                accept="image/*"
                :on-success="handleSuccess"
                :headers="headerObject"
                ref="upload"
                :on-preview="handlePictureCardPreview"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>

            <el-row>
              <el-col :span="12">
                <div class="grid-content bg-purple-light">
                  <el-form-item label="物资规格" prop="model">
                    <el-input v-model="addRuleForm.model"></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <el-form-item label="分类" prop="categoryKeys">
                    <el-cascader
                      :options="catetorys"
                      clearable
                      filterable
                      :props="selectProps"
                      v-model="addRuleForm.categoryKeys"
                    ></el-cascader>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <el-form-item label="单位" prop="unit">
                    <el-input v-model="addRuleForm.unit"></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple-light">
                  <el-form-item label="排序" prop="sort">
                    <el-input-number v-model="addRuleForm.sort" :min="1" :max="10" label="排序"></el-input-number>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>

            <el-form-item label="备注信息" prop="remark">
              <el-input type="textarea" v-model="addRuleForm.remark"></el-input>
            </el-form-item>

          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="add" :disabled="btnDisabled" :loading="btnLoading">确 定</el-button>
        </span>
      </el-dialog>

    </el-card>


  </div>
</template>

<script>
  export default {
    name: "Product",
    data() {
      return {
        uploadApi: 'http://localhost:8081/upload/image',
        btnLoading: false,
        btnDisabled: false,
        loading: true,
        total: 0, //总共多少条数据
        productData: [], //表格数据
        headerObject: {
          Authorization: window.localStorage.getItem("JWT_TOKEN")
        }, //图片上传请求头
        queryMap: {
          pageNum: 1,
          pageSize: 8,
          name: "",
          categoryId: "",
          supplier: "",
          status: 0,
        }, //查询对象
        catetorys: [], //类别选择
        categorykeys: [], //搜索类别
        selectProps: {
          expandTrigger: "hover",
          value: "id",
          label: "name",
          children: "children",
          checkStrictly: false
        }, //级联选择器配置项
        searchSelectProps: {
          expandTrigger: "hover",
          value: "id",
          label: "name",
          children: "children",
          checkStrictly: true
        }, //级联搜索选择器配置项
        editDialogVisible: false,
        addDialogVisible: false, //添加弹框是否显示
        addRuleForm: {}, //添加表单数据
        editRuleForm: {}, //修改表单数据
        uploadDisabled: false,
        limitcount: 1,
        dialogImageUrl: "",
        dialogVisible: false,
        addRuleForm: { pid: "0", name: "", remark: "", sort: "" }, //添加表单
        addRules: {
          name: [
            {required: true, message: "请输入物资名称", trigger: "blur"},
            {min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur"}
          ],
          unit: [
            {required: true, message: "请输入物资单位", trigger: "blur"},
            {min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur"}
          ],
          model: [
            {required: true, message: "请输入物资规格", trigger: "blur"},
            {min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur"}
          ],
          remark: [
            {required: true, message: "请输入物资说明备注", trigger: "blur"},
            {min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur"}
          ],
          categorys: [
            {required: true, message: "请输入物资分类", trigger: "blur"}
          ],
          sort: [{required: true, message: "请输入地址信息", trigger: "blur"}],
          categoryKeys: [
            {required: true, message: "请选择物资分类", trigger: "blur"}
          ]
        }, //添加验证
        imgFilesList: [],
      }

    },
    methods: {
      /**
       * 添加物资
       */
      add() {
        this.$refs.addRuleFormRef.validate(async valid => {
          if (!valid) {
            return;
          } else {
            this.btnDisabled = true;
            this.btnLoading = true;
            const {data: res} = await this.$http.post(
              "product/add",
              this.addRuleForm
            );
            if (res.code == 200) {
              this.$message.success("物资添加成功");
              this.addRuleForm = {};
              await this.getproductList();
            } else {
              return this.$message.error("物资添加失败:" + res.msg);
            }
            this.addDialogVisible = false;
            this.btnDisabled = false;
            this.btnLoading = false;
          }
        });
      },
      //关闭弹出框
      closeAddDialog() {
        this.$refs.addRuleFormRef.clearValidate();
        this.addRuleForm = {};
        this.$refs.upload.clearFiles();
      },
      handleChange(file, fileList) {
        this.uploadDisabled = fileList.length >= this.limitcount;
      },
      handleRemove(file, fileList) {
        this.uploadDisabled = fileList.length >= this.limitcount;
        this.addRuleForm.imageUrl = "";
      },
      handleSuccess(response, file, fileList) {
        this.addRuleForm.imageUrl = response.msg;
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      /**
       * 打开添加物资弹框
       */
      openAdd() {
        this.getCatetorys();
        this.addDialogVisible = true;
      },
      //重置查询表单
      resetForm() {
        this.queryMap = {
          pageNum: 1,
          pageSize: 8,
          name: "",
          categoryId: "",
          supplier: "",
          status: 0,
        };
        this.categorykeys = []
        this.getproductList();
      },
      /**
       * 分类搜索改变时
       */
      selectChange() {
        var str = "";
        for (var i = 0; i < this.categorykeys.length; i++) {
          str += this.categorykeys[i] + ",";
        }
        str = str.substring(0, str.length - 1);
        this.queryMap.categorys = str;
      },
      /**
       * 搜索物资
       */
      search() {
        this.queryMap.pageNum = 1;
        this.getproductList();
      },
      /**
       * 加载物资列表
       */
      async getproductList() {
        const {data: res} = await this.$http.get("product/findProductList", {
          params: this.queryMap
        });
        if (res.code !== 200) {
          return this.$message.error("获取物资列表失败");
        } else {
          this.total = res.data.total;
          this.productData = res.data.rows;
        }
        // console.log(res)
      },
      /**
       * 加载物资类别
       */
      async getCatetorys() {
        const {data: res} = await this.$http.get(
          "productCategory/categoryTree"
        );
        if (res.code !== 200) {
          return this.$message.error("获取物资类别失败");
        } else {
          this.catetorys = res.data.rows;
        }
      },
      //改变页码
      handleSizeChange(newSize) {
        this.queryMap.pageSize = newSize;
        this.getproductList();
      },
      //翻页
      handleCurrentChange(current) {
        this.queryMap.pageNum = current;
        this.getproductList();
      }
    },
    created() {
      this.getproductList();
      this.getCatetorys();
      setTimeout(() => {
        this.loading = false;
      }, 500);
    }
  }
</script>

<style scoped>

</style>
